import {DefinePage, PageWrapperBox} from "@/layout/Page";
import styled from "styled-components";
import {Upload} from "antd";
import {useRef, useState} from "react";


const OneFileUploadInner = styled.div`

`

const UploadBox = styled.div`
    width: 260px;
    height: 130px;
    border: 1px dashed #ccc;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    cursor: pointer;

    &:hover {
        border-color: #409eff;
    }
`
const TextGray = styled.span`
    font-size: 12px;
    color: #999;
`
/*浅蓝色字体*/
const TextBlue = styled.span`
    font-size: 12px;
    color: #409eff;

    &:hover {
        font-weight: bold;
    }
`


const UploadPadding = styled.div`
    width: 260px;
    height: 130px;
    border: 1px dashed #ccc;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
`

/**
 * 单文件上传组件
 * @param url
 * @param fileDate
 * @constructor
 */
function OneFileUpload({onUpload, fileDate}: any) {

    const [start, setStart] = useState(0)

    const inputRef: any = useRef(null)

    const openSelectFile = () => {
        if (!inputRef || !inputRef.current) return
        inputRef.current.value = ''
        inputRef.current.click()
    }

    const handleUpload = (event: any) => {
        let e = window.event || event;
        // 获取当前选中的文件
        let File = e.target.files[0];
        console.log(File);//打印值看下面图片,简单点的话我们直接把这个数据给后台处理就可以了
        // 对 文件进行现对应的校验，校验文件是满足对应的需求
        // TODO checkFile
        // 校验成功后，开始上传文件，并显示上传进度
        // TODO uploadFile
    }

    return <OneFileUploadInner>
        {/*上传文件 box*/}
        {(start == 0) && <UploadBox onClick={openSelectFile}>
            <svg className="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" width="60" height="60">
                <path
                    d="M239.317333 810.666667l-8.533333-1.28C173.226667 801.152 128 750.805333 128 689.152c0-51.157333 31.146667-94.72 75.050667-112.725333L256.170667 554.666667 256 495.36a213.333333 213.333333 0 0 1 420.437333-51.328l15.189334 61.354667 63.104 3.370666C832.853333 512.853333 896 578.346667 896 659.584c0 84.053333-67.413333 151.04-149.333333 151.04H725.333333v85.333333h21.333334c129.621333 0 234.666667-105.813333 234.666666-236.373333 0-126.293333-98.304-229.461333-222.08-236.074667A298.666667 298.666667 0 0 0 170.666667 495.488v1.962667a206.933333 206.933333 0 0 0-128 191.658666c0 104.192 76.458667 190.421333 175.957333 204.8v2.048H298.666667v-85.333333H239.317333z"
                    fill="#dbdbdb"></path>
                <path
                    d="M512 512l219.477333 219.477333h-120.704L512 632.618667l-98.858667 98.858666H292.522667L512 512z"
                    fill="#dbdbdb"></path>
                <path d="M554.666667 597.333333v298.666667h-85.333334v-298.666667h85.333334z" fill="#dbdbdb"
                ></path>
            </svg>
            <TextGray><TextBlue>单击此处</TextBlue>或者拖拽到此处,上传文件</TextGray>
        </UploadBox>}

        {/*文件正在上传*/}
        {start == 1 && <UploadPadding>
            {/*图片上传中进度条*/}
            <div className="progress-box">
                <div className="progress-bar" style={{width: '50%'}}></div>
                <span className="progress-text">50%</span>
                <span className="progress-text">上传中</span>
                <span className="progress-text">取消</span>
            </div>
        </UploadPadding>}

        <input ref={inputRef} style={{opacity: 0}} type="file" onChange={handleUpload}/>
    </OneFileUploadInner>
}

export default () => {

    const url = '/api/system/menu/upload'

    return <PageWrapperBox>
        <span>单文件上传</span>


        <OneFileUpload url={url} fileDate={[]}/>
    </PageWrapperBox>
}
